<template>
  <div class="limitGoodsWrapper">
    <div class="params">
        <el-button type="primary" class="el-icon-plus" @click="openAdd()">添加</el-button>
    </div>
    <el-table :data="tableData" border highlight-current-row stripe style="width: 100%">
      <el-table-column prop="weight" label="权重"></el-table-column>
      <el-table-column prop="imgSrc" label="商品主图">
        <template slot-scope="scope">
          <img :src="scope.row.imgSrc" width="130" height="130">
        </template>
      </el-table-column>
      <el-table-column prop="title" label="商品标题"></el-table-column>
      <el-table-column prop="price" label="商品价格"></el-table-column>
      <el-table-column prop="creatTime" label="创建时间"></el-table-column>
      <el-table-column prop="num" label="设置数量"></el-table-column>
      <el-table-column prop="nick" label="操作">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteIt(scope.row.goodsCode)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :modal-append-to-body="false" :visible.sync="isOpenDialog">
      <el-form>
        <el-form-item label="商品编号:">
          <el-input v-model="submitMap.goodsCode" :disabled="type==2"></el-input>
        </el-form-item>
        <el-form-item label="数量:">
          <el-input v-model="submitMap.num"></el-input>
        </el-form-item>
        <el-form-item label="权重:">
            <el-input v-model="submitMap.weight"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isOpenDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitHotWord()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    ajax,
    getLimitGoodsList,
    setLimitGoods,
    modifyLimitGoods,
    deleteLimitGoods
  } from "../../data/service";
  import LazyImgUpload from "../../components/LazyImgUpload"

  export default {
    name: "constantList",
    components:{
      LazyImgUpload
    },
    data() {
      return {
        param: {
          pageUri: 'version'
        },
        type: '',
        tableData: [],
        isOpenDialog: false,
        submitMap: {
          
        },
        dialogTitle: ''
      }
    },
    created() {
      this.loadData();
    },
    mixins: [ajax],
    methods: {
      loadData() {
        this.doajax(getLimitGoodsList, {}, (resp) => {
          this.tableData = resp.data;
        })
      },
      deleteIt(id) {
        this.doajax(deleteLimitGoods, {"goodsCode": id}, (resp) => {
          this.success("删除成功");
          this.loadData();
        })
      },
      openAdd() {
        this.isOpenDialog = true;
        this.type = 1
        this.dialogTitle = '添加限时抢购'
        this.submitMap = {
          goodsCode: '',
          weight: '',
          num: ''
        };
      },

        edit(info){
            this.isOpenDialog = true;
            this.type = 2
            this.dialogTitle = '修改限时抢购'
            let sbMap = {
                goodsCode: info.goodsCode,
                weight: info.weight,
                num: info.num
            }
            this.submitMap = sbMap
        },

        changeColor(val){
            this.$set(this.submitMap, 'colorVal', val)
            // console.info(this.submitMap)
        },

      submitHotWord() {
        let data = {}
        for(let key in this.submitMap){
            if(this.submitMap[key]){
                if(key == 'colorVal'){
                    data[key] = encodeURIComponent(this.submitMap[key])
                }else{
                    data[key] = this.submitMap[key]
                }
            }
        }
        if(this.type == 1){
            this.doajax(setLimitGoods, data, (resp) => {
                this.success("添加成功");
                this.loadData();
                this.isOpenDialog = false;
            })
        }else if(this.type == 2){
            this.doajax(modifyLimitGoods, data, (resp) => {
                this.success("修改成功");
                this.loadData();
                this.isOpenDialog = false;
            })
        }
      }

    }
  }
</script>

<style scoped>
.limitGoodsWrapper img{max-width: 130px; max-height: 130px;}
</style>
